<template>
  <div class="map-toggle">
    <img
      src="../../assets/image/矢量图.gif"
      alt=""
      @click="toggleMap"
      class="vector"
    />
    <img
      src="../../assets/image/影像图.gif"
      alt=""
      @click="toggleMap"
      class="image"
    />
  </div>

</template>

<script setup>
import {
  // 天地图矢量图层
  TiandiMap_vec,
  // 天地图影像图层
  TiandiMap_img,
  // 天地图矢量注记图层
  TiandiMap_cva,
  // 天地图影像注记图层
  TianDiMap_cia,
} from "../../libs/mapBase";


let $map = null;

onMounted(() => {
  $map = inject("$map");
});

// 切换底图
function toggleMap(e) {
  if (e.target.className === "vector") {
    TiandiMap_vec.setVisible(true);
    TiandiMap_cva.setVisible(true);
    TiandiMap_img.setVisible(false);
    TianDiMap_cia.setVisible(false);
  }
  if (e.target.className === "image") {
    TiandiMap_img.setVisible(true);
    TianDiMap_cia.setVisible(true);
    TiandiMap_vec.setVisible(false);
    TiandiMap_cva.setVisible(false);
  }
}


</script>

<style lang="scss" scoped>
.map-toggle {
  position: fixed;
  bottom: 40px;
  right: 10px;
  cursor: pointer;
  img {
    width: 50px;
    height: 50px;
    margin-left: 10px;
    border-radius: 50px;
  }
}

</style>
